<template>
    <div>
        <head-top></head-top>
		<!-- <img data-v-4dfc1336="" style="width:100%" src="https://wpimg.wallstcn.com/0e03b7da-db9e-4819-ba10-9016ddfdaed3" class="emptyGif"> -->
		<section class="data_section">
			<header class="section_title">推广王用户数据分析</header>
			<el-row :gutter="20" style="margin-bottom: 10px;">
                <el-col :span="4"><div class="data_list today_head"><span class="data_num head">当日新增：</span></div></el-col>
				<el-col :span="4"><div class="data_list"><span class="data_num">{{userCount}}</span></div></el-col>
			</el-row>
            <el-row :gutter="20">
                <el-col :span="4"><div class="data_list all_head"><span class="data_num head">总用户数：</span></div></el-col>
                <el-col :span="4"><div class="data_list"><span class="data_num">{{allUserCount}}</span></div></el-col>
            </el-row>
		</section>
		<tendency :sevenDate='sevenDate' :sevenDay='sevenDay'></tendency>
    </div>
</template>

<script>
	import headTop from '../components/headTop'
	import tendency from '../components/tendency' 
	import dtime from 'time-formater'
	import {userCount, orderCount, getUserCount,getAnalyzeMalls, getNewAddUserList,getAnalyzeMallsTrend,getOrderCount, adminDayCount, adminCount} from '@/api/getData'
    export default {
    	data(){
    		return {
    			userCount: null,
    			orderCount: null,
                adminCount: null,
                allUserCount: null,
                allOrderCount: null,
                allAdminCount: null,
    			sevenDay: [],
    			sevenDate: [[],[],[]],
    		}
    	},
    	components: {
    		headTop,
    		tendency,
    	},
    	mounted(){
    		this.initData();
    		this.getSevenData();
    	},
        computed: {

        },
    	methods: {
    		async initData(){
    			const today = dtime().format('YYYY-MM-DD')
				const Users = await getAnalyzeMalls(today);
                this.userCount = Users.data.new_count;
            	this.allUserCount = Users.data.total_count;
    		},
    		async getSevenData(){
				const tmp_date = dtime(new Date().getTime() - 86400000*14).format('YYYY-MM-DD')
				const trend_date = await getAnalyzeMallsTrend();
				trend_date.data.forEach(item => {
					if(tmp_date <= item.day){
						this.sevenDay.push(item.day)
						this.sevenDate[0].push(item.pv)
						this.sevenDate[1].push(item.uv)
					}
				})
				
				const new_users = await getNewAddUserList();
				new_users.data.forEach(item => {
					if(tmp_date <= item.time){
						this.sevenDate[2].push(item.count)
					}
                })
    			// const apiArr = [[],[],[]];
    			// this.sevenDay.forEach(item => {
    			// 	apiArr[0].push(userCount(item))
    			// 	apiArr[1].push(orderCount(item))
                //     apiArr[2].push(adminDayCount(item))
    			// })
    			// const promiseArr = [...apiArr[0], ...apiArr[1], ...apiArr[2]]
    			// Promise.all(promiseArr).then(res => {
    			// 	const resArr = [[],[],[]];
				// 	res.forEach((item, index) => {
				// 		if (item.status == 1) {
				// 			resArr[Math.floor(index/7)].push(item.count)
				// 		}
				// 	})
				// 	this.sevenDate = resArr;
    			// }).catch(err => {
    			// 	console.log(err)
    			// })
    		}
    	}
    }
</script>

<style lang="less">
	@import '../style/mixin';
	.data_section{
		padding: 20px;
		margin-bottom: 40px;
		.section_title{
			text-align: center;
			font-size: 30px;
			margin-bottom: 10px;
		}
		.data_list{
			text-align: center;
			font-size: 14px;
			color: #666;
            border-radius: 6px;
            background: #E5E9F2;
            .data_num{
                color: #333;
                font-size: 26px;

            }
            .head{
                border-radius: 6px;
                font-size: 22px;
                padding: 4px 0;
                color: #fff;
                display: inline-block;
            }
        }
        .today_head{
            background: #FF9800;
        }
        .all_head{
            background: #20A0FF;
        }
	}
    .wan{
        .sc(16px, #333)
    }
</style>
